<template>
	<view>
		<u-loading-icon v-show="type=='loading'" size='14' textSize='14' mode='circle' color='#222222' :vertical='true'
			textColor='#222222' :text="handleLang('加载中')"></u-loading-icon>
		<view class="flex flex-dir-col flex-ai-center" :style="{marginTop:emptyTop*2+'rpx'}" v-if="empty"
			v-show="type=='empty'">
			<image style="width:236rpx;" mode="widthFix" :src="$ossUrl+empty.icon"></image>
			<text :class="`font-size-18 mt-12  mt-16 ${fontColor}`" v-if="empty.title">{{ empty.title }}</text>
			<text class="font-size-12 font-color-999 mt-4" v-if="empty.text">{{ empty.text }}</text>
			<w-button class='mt-16' type="colorful" :style='btnStyle' v-if="empty.btn" size="sm" shape="circle"
				@click="btnChange">{{handleLang(empty.btn)}}</w-button>
		</view>
		<view class="font-size-12 font-color-describe flex-center" v-if="type=='nomore'">{{ loadingText }}</view>
	</view>
</template>

<script>
	import emptyMap from './emptyMap.js'
	export default {
		name: "w-loading",
		props: {
			type: {
				type: String,
				default: "none"
			},
			emptyType: {
				type: String,
				default: ''
			},
			emptyTop: {
				type: [String, Number],
				default: 16
			},
			url: {
				type: String,
				default: ''
			},
			action: {
				type: String
			},
			btnStyle: {
				type: String | Object,
				default: 'min-width: 168rpx;'
			},
			loadingText: {
				type: String | Object,
				default: '已经到底了~'
			},
			fontColor: {
				type: String,
				default: 'font-color-696961'
			}
		},
		computed: {
			empty() {
				let obj = emptyMap[this.emptyType]
				if (!obj) return;
				obj.icon = `/static/empty/${this.emptyType}-empty.png`
				return obj
			}
		},
		data() {
			return {

			};
		},
		methods: {
			btnChange() {
				let obj = emptyMap[this.emptyType];
				let navType = ['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'];
				if (navType.includes(obj.action)) {
					uni.$u.route({
						type: obj.action,
						url: obj.url
					})
				} else {

				}
			}
		}
	}
</script>

<style lang="scss">
	.font-color-696961 {
		color: #696961;
	}
</style>